<template>
  <el-container>
    <el-header height="80px" style="background-color: white">
      <div style="width: 1200px;margin: 0 auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <router-link to="/">
              <img src="/imgs/XiangJuLogo.jpg" width="150" height="100" style="margin-top: -15px;margin-left: 150px" >
            </router-link>

          </el-col>
          <el-col :span="10">
            <el-menu mode="horizontal" active-text-color="orange">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">买房</el-menu-item>
              <el-menu-item index="3">租房</el-menu-item>
              <el-menu-item index="4">卖房</el-menu-item>
              <el-menu-item index="5">装修</el-menu-item>
              <el-menu-item index="6">问答</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <el-input style="position: relative;top: 15px"
                      placeholder="请输入搜索的关键字">
              <template #append>
                <el-button :icon="Search"/>
              </template>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-popover v-if="user==null"
                        placement="top-start"
                        title="欢迎来到湘居!"
                        :width="200"
                        trigger="hover"
            >
              <template #reference>
                <el-icon style="position: relative;top: 15px" :size="30">
                  <User/>
                </el-icon>
              </template>
              <el-button type="info" @click="router.push('/reg')">注册</el-button>
              <el-button type="warning" @click="router.push('/login')">登录</el-button>
            </el-popover>
            <el-popover v-else
                        placement="top-start"
                        title="欢迎来到湘居!"
                        :width="200"
                        trigger="hover"
            >
              <template #reference>
                <el-icon style="position: relative;top: 15px" :size="30">
                  <User/>
                </el-icon>
              </template>
              <!--     显示头像的组件   http://localhost:8080/2023/10/19/xxx.jpg      -->
              <div style="text-align: center">
                <el-avatar :src="'http://localhost:8080'+user.imgUrl"></el-avatar><br>
                <el-button type="info" size="small" @click="router.push('/personal')">个人中心</el-button>
                <el-button type="warning" size="small" @click="logout()">退出登录</el-button>
                <el-button v-if="user.isAdmin==1" size="small"
                           type="danger" @click="router.push('/admin')">后台管理页面
                </el-button>
              </div>

            </el-popover>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
    <el-footer style="background-color: black;height: 280px;padding: 50px 0">
      <div style="width: 1200px;margin: 0 auto;
      color: #666;text-align: center">
        <el-row>
          <el-col :span="8">
            <img src="/imgs/XiangJuLogo.jpg" width="100" height="100">
            <p>租房就来湘居</p>
            <p>专业租房</p>
            <p>全国百城房源等你来</p>
          </el-col>
          <el-col :span="8" id="footer-center">
            <el-row>
              <el-col :span="8">
                <h3>关于我们</h3>
                <p>分类信息</p>
                <p>求职招聘</p>
                <p>社区交流</p>
              </el-col>
              <el-col :span="8">
                <h3>服务与支持</h3>
                <p>联系我们</p>
                <p>广告投放</p>
                <p>用户协议</p>
                <p>友情链接</p>
                <p>在线反馈</p>
              </el-col>
              <el-col :span="8">
                <h3>底部导航</h3>
                <p>Archiver</p>
                <p>手机版</p>
                <p>小黑屋</p>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <p style="font-size: 60px;margin: 0">
              <span style="color: orange">湘</span>居
            </p>
            <p>租房行业社区平台</p>
          </el-col>
        </el-row>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>
